<template>
    <div class="treasure">
        <view-head></view-head>
        <div class="control_c">
            <el-menu @select="selectMenu"  :router="true" @open="handleOpen" @close="handleClose" class="el-menu-vertical-demo"  :collapse="isCollapse">
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">组合管理</span>
                    </template>
                    <el-menu-item index="/treasure/treasureRoles">组合添加</el-menu-item>
                    <el-menu-item index="/treasure/roleslist">组合列表</el-menu-item>
                </el-submenu>
                <el-menu-item index="/treasure/analysis">
                <i class="el-icon-menu"></i>
                <span slot="title">组合分析</span>
                </el-menu-item>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">查询</span>
                    </template>
                    <el-menu-item index="/treasure/accountDetail">账户详情</el-menu-item>
                    <el-menu-item index="/treasure/tradingDay">交易日结</el-menu-item>
                    <el-submenu index="3-2-1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">交易日志</span>
                        </template>
                        <el-menu-item index="/treasure/tradingExchange">交易对</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">配置</span>
                    </template>
                    <el-menu-item index="/treasure/arbitrageSelect">套利对选择</el-menu-item>
                    <el-menu-item index="/treasure/arbitrageCost">套利交易成本</el-menu-item>
                    <el-menu-item index="/treasure/arbitrageFormat">套利显示格式</el-menu-item>
                </el-submenu>
                <!--<el-menu-item index="/control/dayknot">-->
                    <!--<i class="el-icon-menu"></i>-->
                    <!--<span slot="title">日结报表</span>-->
                <!--</el-menu-item>-->
                <!--<el-submenu index="3">-->
                    <!--<template slot="title">-->
                        <!--<i class="el-icon-menu"></i>-->
                        <!--<span slot="title">统计查询</span>-->
                    <!--</template>-->
                    <!--<el-menu-item index="/control/statistics">收益查询</el-menu-item>-->
                    <!--<el-menu-item index="/control/log">日志查询</el-menu-item>-->
                <!--</el-submenu>-->
            </el-menu>
            <div class="control-body" v-bind:class="{'collapse':isCollapse,'uncollapse':!isCollapse}">
                <i @click="collapseControl()" style="font-size: 30px; color: #333; background: #fff; position: fixed; cursor: pointer;" class="el-icon-menu"></i>
                <div class="c-body-son">
                    <router-view v-if="isRouterAlive" ref="sonview"></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/components/__header.vue'
    export default {
        name: "treasure",
        components: {
            'view-head':Header,
        },
        provide () {
            return {
                reloadTreasure: this.reloadTreasure
            }
        },
        data(){
            return {
                isCollapse: false,
                isRouterAlive:true
            };
        },
        methods:{
            collapseControl:function(){
                this.isCollapse=!this.isCollapse;
            },
            handleOpen(key, keyPath) {
               // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
               // console.log(key, keyPath);
            },
            selectMenu(key, keyPath){
                if(keyPath=="/treasure/analysis"){
                    if(typeof this.$refs.sonview.reloadAn != 'undefined' && this.$refs.sonview.reloadAn instanceof Function){
                        this.$refs.sonview.reloadAn();
                    }else{
                        let _that=this;
                        setTimeout(function(){
                            _that.$refs.sonview.reloadAn();
                        }, 500);
                    }
                }
            },
            reloadTreasure (){
                this.isRouterAlive = false
                this.$nextTick(function(){
                    this.isRouterAlive = true
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    $width:200px;
    .treasure{
        .control_c{
            padding-top: 60px;
            .el-menu-vertical-demo:not(.el-menu--collapse) {
                width: $width;height: 100%; position: fixed; overflow: auto; z-index: 1000;
            }
            .el-menu{
                height: 100%; position: fixed; overflow: auto;z-index: 1000; margin-top: 2px;
            }
            .control-body{
                padding-top: 10px; position: relative;
                .c-body-son{
                    padding-left: 40px; padding-top: 40px;
                }
            }
            .uncollapse{
                padding-left: $width+10;
            }
            .collapse{
                padding-left: 75px;
            }
        }
    }
</style>
